<template>
    <section class="schoolDetails-section">
        <header><i class="el-icon-location-outline"></i> 学校详情信息</header>
        <div class="container" v-show="!schoolDetails_NoDataShow">
            <aside class="school-info-box">
                <p>学校名称：{{isNull0(schoolName)}}</p>
                <p>学校地址：{{isNull0(schoolAddress)}}</p>
                <p>学校电话：+001 {{isNull0(schoolPhone)}}</p>
            </aside>
            <aside>
                <div class="chart-div" id="studentsRace-chart" style="width: 100%; height: 300px; margin: 30px 0 0 0;"></div>
            </aside>
            <aside>
                <div class="chart-div" id="studentsGender-chart" style="width: 100%; height: 300px;"></div>
            </aside>
            <aside >
                <div class="chart-div" id="enrollment-chart" style="width: 100%; height: 300px;"></div>
            </aside>
            <aside>
                <p>1、学校是否有预科(AP)课程：<span>{{ isTrueOrFalse(advancedPlacement) }}</span></p>
                <p>2、是否是特许学校：<span>{{ isTrueOrFalse(charter) }}</span></p>
                <p>3、是否有图书馆：<span>{{ isTrueOrFalse(library) }}</span></p>
                <p>5、学生与教师的比例：<span>{{ isNull0(studentTeacherRatio) }}</span></p>
                <p>6、是否是一所名牌学校：<span>{{ isTrueOrFalse(titleI) }}</span></p>
                <p>7、学校的学生总数：<span>{{ isNull0(totalStudents) }}人</span></p>
                <p>8、学校的教师(全职)总数：<span>{{ isNull0(totalTeachers) }}人</span></p>
            </aside>
        </div>
        <h4 v-show="schoolDetails_NoDataShow">暂未查询到数据！</h4>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                schoolInfo: JSON.parse(this.$route.query.schoolInfo) || null, //学校基本信息
                studentsRaceMyEcharts: '',//人口统计数据——饼图
                studentsGenderMyEcharts: '',//人口统计数据——饼图
                enrollmentMyEcharts: '',//各年级学生人数——柱状图
                schoolName: '',     //名称
                schoolAddress: '',  //地址
                schoolPhone: '',    //电话
                advancedPlacement: '',//学校是否有预科(AP)课程
                charter: '',    //是否是特许学校
                library: '',    //是否有图书馆
                studentTeacherRatio: '',//学生与教师的比例
                titleI: '',     //是否是一所名牌学校
                totalStudents: '',  //学校的学生总数
                totalTeachers: '',  //学校的教师(全职)总数
                schoolDetails_NoDataShow: false, //学校详情——判断是否有无数据

            }
        },
        computed: {},
        created() {
        },
        mounted() {
            if(this.schoolInfo && Object.keys(this.schoolInfo).length > 0){
                this.schoolName = this.schoolInfo.name || '';
                this.schoolAddress = this.schoolInfo.address || '';
                this.schoolPhone = this.schoolInfo.phone || '';

                this.$nextTick(() =>{
                    this.studentsRaceMyEcharts = echarts.getInstanceByDom(document.getElementById('studentsRace-chart'));
                    if (this.studentsRaceMyEcharts === undefined) {
                        this.studentsRaceMyEcharts = echarts.init(document.getElementById('studentsRace-chart'));
                    }
                    this.studentsRaceMyEcharts.showLoading();

                    this.studentsGenderMyEcharts = echarts.getInstanceByDom(document.getElementById('studentsGender-chart'));
                    if (this.studentsGenderMyEcharts === undefined) {
                        this.studentsGenderMyEcharts = echarts.init(document.getElementById('studentsGender-chart'));
                    }
                    this.studentsGenderMyEcharts.showLoading();

                    this.enrollmentMyEcharts = echarts.getInstanceByDom(document.getElementById('enrollment-chart'));
                    if (this.enrollmentMyEcharts === undefined) {
                        this.enrollmentMyEcharts = echarts.init(document.getElementById('enrollment-chart'));
                    }
                    this.enrollmentMyEcharts.showLoading();

                    window.addEventListener('resize', () => {
                        this.studentsRaceMyEcharts.resize();
                        this.studentsGenderMyEcharts.resize();
                        this.enrollmentMyEcharts.resize();
                    });
                });

                //获取学校详情信息
                this.getSchoolDetails();
            }
        },
        destroyed() {
            if(this.studentsRaceMyEcharts){
                this.studentsRaceMyEcharts.dispose();
            }
            if(this.studentsGenderMyEcharts){
                this.studentsGenderMyEcharts.dispose();
            }
            if(this.enrollmentMyEcharts){
                this.enrollmentMyEcharts.dispose();
            }
        },
        methods: {
            //获取学校详情信息
            getSchoolDetails(){
                this.$get('/report/school/detail/'+ this.schoolInfo.id).then(res => {
                    if (res.data != null) {
                        this.schoolDetails_NoDataShow = false;
                        this.studentsRace_charts(res.data.demographics);
                        this.studentsGender_charts(res.data.demographics);
                        this.enrollment_charts(res.data.enrollment);
                        this.advancedPlacement = res.data.advancedPlacement;
                        this.charter = res.data.charter;
                        this.library = res.data.library;
                        this.studentTeacherRatio = res.data.studentTeacherRatio;
                        this.titleI = res.data.titleI;
                        this.totalStudents = res.data.totalStudents;
                        this.totalTeachers = res.data.totalTeachers;
                    } else {
                        this.schoolDetails_NoDataShow = true;
                    }
                });
            },
            //学校详情信息框展示——判断是与否
            isTrueOrFalse(data){
                let val = '';
                if(data){
                    val = '是';
                }else{
                    val = '否';
                }
                return val;
            },
            //学生种族比例——饼图
            studentsRace_charts(data){
                let other = 100 - data.asian - data.hispanic - data.natives - data.pacific - data.black - data.white;
                this.studentsRaceMyEcharts.hideLoading();
                this.studentsRaceMyEcharts.setOption({
                    title: {
                        text: '学生种族比例',
                        left: 'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/> <span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#00b8ee'></span> {b}: {c}%"
                    },
                    legend: {
                        orient: 'horizontal',
                        left: 'left',
                        top: '25',
                        data: ["亚裔学生", "西班牙裔学生", "本地土著学生", "夏威夷或太平洋岛民后裔学生", "黑人学生", "白人学生", "其他人种"]
                    },
                    series : [{
                        name: '学生种族比例',
                        type: 'pie',
                        radius :  ['10%', '30%'],//圆的内外半径
                        center: ['50%', '60%'],//圆的X,Y轴平移
                        data:[
                            {
                                value: data.asian,
                                name: '亚裔学生',
                            },
                            {
                                value: data.hispanic,
                                name: '西班牙裔学生',
                            },
                            {
                                value: data.natives,
                                name: '本地土著学生',
                            },
                            {
                                value: data.pacific,
                                name: '夏威夷或太平洋岛民后裔学生',
                            },
                            {
                                value: data.black,
                                name: '黑人学生',
                            },
                            {
                                value: data.white,
                                name: '白人学生',
                            },
                            {
                                value: this.$accounting.formatMoney(other, "", 2),
                                name: '其他人种',
                            },
                        ],
                        //高亮的扇区和标签样式
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label:{
                            formatter:'{b}：{c}%'
                        }
                    }],
                    color: ['#40c3f9', '#ffbf53', '#fe5960', '#00bc7b', '#f963a0', '#4cabce', '#006699'],
                });
            },
            //学生性别比例——饼图
            studentsGender_charts(data){
                this.studentsGenderMyEcharts.hideLoading();
                this.studentsGenderMyEcharts.setOption({
                    title: {
                        text: '学生性别比例',
                        left: 'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/> <span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#00b8ee'></span> {b}: {c}%"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        top: '25',
                        data: ["男生", "女生"]
                    },
                    series : [{
                        name: '学生性别比例',
                        type: 'pie',
                        radius :  ['20%', '40%'],//圆的内外半径
                        center: ['50%', '60%'],//圆的X,Y轴平移
                        data:[
                            {
                                value: data.male,
                                name: '男生',
                            },
                            {
                                value: data.female,
                                name: '女生',
                            },
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label:{
                            formatter:'{b}：{c}%'
                        }
                    }],
                    color: ['#40c3f9', '#ffbf53'],
                });
            },
            //各年级学生人数——柱状图
            enrollment_charts(data) {
                this.enrollmentMyEcharts.hideLoading();
                this.enrollmentMyEcharts.setOption({
                    title: {
                        text: '各年级学生人数',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        data: ["早教班", "幼儿园", "一年级", "二年级", "三年级", "四年级", "五年级", "六年级", "七年级", "八年级", "九年级", "十年级", "十一年级", "十二年级"],
                        //坐标轴刻度标签的相关设置
                        axisLabel:{
                            color: '#969696',
                            rotate: '45'
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    yAxis: {
                        //分隔线的相关设置
                        splitLine: {
                            lineStyle:{
                                color: '#f1f1f1'
                            }
                        },
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            color: '#969696',
                        },
                        //坐标轴轴线相关设置
                        axisLine:{
                            lineStyle:{
                                color: '#969696'
                            }
                        },
                        //坐标轴刻度相关设置
                        axisTick:{
                            show: false,
                        },
                    },
                    series: [{
                        name: '学生人口统计数据',
                        type: 'bar',
                        label: {
                            show: true,//柱子上边显示文字标签
                            position: 'top',
                            formatter: param => {
                                return param.value ;
                            },
                            offset: [0, -5],
                            fontSize: 12,
                            fontWeight: 'bold'
                        },
                        data: [
                            {
                                value: data.pk,
                            },
                            {
                                value: data.kg,
                            },
                            {
                                value: data.y1,
                            },
                            {
                                value: data.y2,
                            },
                            {
                                value: data.y3,
                            },
                            {
                                value: data.y4,
                            },
                            {
                                value: data.y5,
                            },
                            {
                                value: data.y6,
                            },
                            {
                                value: data.y7,
                            },
                            {
                                value: data.y8,
                            },
                            {
                                value: data.y9,
                            },
                            {
                                value: data.y10,
                            },
                            {
                                value: data.y11,
                            },
                            {
                                value: data.y12,
                            },
                        ],
                    }],
                    animationEasing: 'elasticOut',
                    color: ['#40c3f9'],
                });
            },

        },
        components: {}
    }
</script>

<style lang="less" type="text/less">
    .schoolDetails-section{
        > header {
            padding: 13px 20px;
            background: #edf7ff;
            font-size: 18px;
            color: #242424;
            border-bottom: 1px solid #dee2e5;
            > i {
                font-size: 20px;
                color: #ff7500;
            }
        }
        >.container{
            padding: 15px;
        }
        > h4 {
            min-height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            color: #000;
            text-align: center;
        }
    }
</style>
